<template>
  <div class="home">
    <!-- 顶部标签 -->
    <div class="top">
      <div class="top-title">代付统计</div>
    </div>
    <!-- 内容板块 -->
    <div class="content">
      <!-- 搜索板块 -->
      <div class="search">
        <div class="search-left">
          <el-select v-model="value" clearable placeholder="全部商户">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search-right">
          <el-button type="primary" icon="el-icon-search">搜索</el-button>
        </div>
      </div>

      <!-- 余额板块 -->
      <div class="balance">
        <div class="balance-box" v-for="item in balance" :key="item.id">
          <div class="balance-box-title">
            <div class="balance-box-title-text">
              {{ item.name }}
            </div>
            <span class="balance-box-title-yuan"> 元 </span>
          </div>
          <div class="balance-box-money">
            <p>{{ item.money }}</p>
          </div>
        </div>
      </div>

      <!-- 充值金额 -->
      <div class="recharge">
        <div class="balance-box" v-for="item in recharge" :key="item.id">
          <div class="balance-box-title">
            <div class="balance-box-title-text">
              {{ item.name }}
            </div>
            <span class="balance-box-title-yuan"> 元 </span>
          </div>
          <div class="balance-box-money">
            <p>{{ item.money }}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 图表 -->
    <div class="chart">
      <div class="vol-data">
        <div class="charts" >
          <div class="charts-title">代付业务折线图</div>
          <div id="myChart" :style="{ width: '100%', height: '300px' }"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "全部商户",
        },
        {
          value: "选项2",
          label: "test",
        },
      ],
      value: "选项1",
      balance: [
        {
          id: 1,
          name: "代代可用余额",
          money: " 40124",
        },
        {
          id: 2,
          name: "商户可用余额",
          money: " 105111",
        },
        {
          id: 3,
          name: "商户总冻结余额",
          money: " 22622",
        },
        {
          id: 4,
          name: "卡上余额",
          money: " 3454545ssssss",
        },
      ],
      recharge: [
        {
          id: 1,
          name: "今日总充值金额",
          money: " 40124",
        },
        {
          id: 2,
          name: "今日总充值手续费",
          money: " 0",
        },
        {
          id: 3,
          name: "今日代付总金额",
          money: " 0",
        },
        {
          id: 4,
          name: "今日代付总笔数",
          money: " 0",
        },
        {
          id: 5,
          name: "今日代付总手续费",
          money: " 0",
        },
        {
          id: 6,
          name: "今日盈利",
          money: " 11111111",
        },
        {
          id: 7,
          name: "昨日总充值金额",
          money: " 11122222",
        },
        {
          id: 8,
          name: "昨日总充值手续费",
          money: " 0",
        },
        {
          id: 9,
          name: "昨日代付总金额",
          money: " 5832",
        },
        {
          id: 10,
          name: "昨日代付总笔数",
          money: " 1",
        },
        {
          id: 11,
          name: "昨日代付总手续费",
          money: " 16999",
        },
        {
          id: 12,
          name: "昨日盈利",
          money: " 16999",
        },
      ],
    };
  },
  components: {},

  onload:{

  },
  mounted() {
    /*初始化ECharts图表，绑定到id=myChart的div上面*/
    var myChart = this.$echarts.init(document.getElementById("myChart"));
    myChart.setOption({
      xAxis: {
        type: "category",
        data: ["代付可用余额", "商户总可用余额", "商户冻结总金额", "昨日盈利","今日盈利","卡上余额"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [4444, 2222, 8888, 2222, 6666,9777],
          type: "line",
        },
      ],
      // 经过显示数据，option中添加tooltip对象
      tooltip: {
        trigger: "axis",
      },
    });
  },
  
};
</script>

<style lang="scss" scoped>
template {
  padding: 15px;
}
.home{
  width: 1400px;
}
// 顶部标签
.top {
  width: 100%;
  height: 40px;
  border-bottom: 1px solid #e6e6e6;
}
.top-title {
  width: 95px;
  height: 100%;
  line-height: 40px;
  min-width: 65px;
  padding: 0 15px;
  text-align: center;
  color: #009688;
  cursor: pointer;
  border-bottom: 2px solid #5fb878;
}
// 内容板块
.content {
  padding: 10px;
}
// 搜索
.search {
  margin-left: 8px;
  display: flex;
}
.search-left {
  width: 115px;
  height: 40px;
}
.el-button--primary {
  background-color: #009688;
  border: #009688;
}
// 余额
.balance {
  display: flex;
  margin-top: 15px;
}
.balance-box {
  margin: 8px;
  width: 190px;
  height: 130px;
  background-color: #fff;
  border-radius: 2px;
}
.balance-box-title {
  height: 42px;
  line-height: 42px;
  padding: 0 15px;
  border-bottom: 1px solid #f6f6f6;
  color: #333;
  border-radius: 2px 2px 0 0;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
}
.balance-box-title-yuan {
  width: 24px;
  height: 20px;
  padding: 0 6px;
  background-color: #393d49;
  border-radius: 2px;
  font-size: 14px;
  color: #fff;
  box-sizing: border-box;
  text-align: center;
  line-height: 20px;
  margin-top: 10px;
}
.balance-box-money {
  color: #666;
  text-align: left;
  padding: 10px 15px;
  line-height: 24px;
}
.balance-box-money p {
  font-size: 36px;
  line-height: 36px;
  padding: 5px 0 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}
//  充值金额 
.recharge {
  display: flex;
  flex-wrap: wrap;
}

//  图表
.vol-data {
  margin-left: 20px;
  padding: 10px;
  width: 1260px;
  background-color: #fff;
}
.charts-title{
  color: #666;
  font-size: 20px;
}
.charts{
  height: 350px;
}
</style>